<template>
	<view>
		<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" :title="title" backIconSize="40"
		 back-icon-color="#000000" :background="background"></u-navbar>
		<view class="top">

		</view>
		<view class="advertising">

		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<image :src="img_pre+item.manor_cover" class="img"></image>
				<image :src="img_pre+item.manor_logo" class="head"></image>
				<view class="data">
					<view class="cont">
						<view class="name">
							{{item.title}}
						</view>
						<view class="date">
							<view class="time">
								开放时间：{{item.date}}
							</view>
						</view>
						<view class="number font">
							{{item.appoint_count}} <text>人预约</text>
						</view>
					</view>
					<view class="button s0" @click="showPopup(index,item.state)">
						进场
						<image src="../../static/image/a6.png" class="go"></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :closeable="true" borderRadius="10" mode="bottom" v-model="share">
			<view class="share">
				<image src="../../static/image/s5.png" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				title: "抢拍蜂巢",
				share: false,
				state: 0,
				index: 0,
				code: false,
				dataList: [{
					image: 'i3',
					title: "葡萄蜂巢",
					state: 1,
					date: "9:00-11:00",
					number: "300"
				}],
				json: {
					score: 0,
					invite_count: 0,
					scoreX: 0,
					invite_countX: 0
				},
				info: {},
				data: {}
			}
		},
		onLoad(option) {
			than = this;
		},
		onPullDownRefresh() {
			setTimeout(function() {
				than.post("api/center/userSelf", null, function(data) {
					than.info = data;
				})
				than.listOfData();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			than.post("api/center/userSelf", null, function(data) {
				than.info = data;
			})
			than.listOfData();
		},
		methods: {
			listOfData() {
				than.post("api/manor/superListOfData", null, function(data) {
					let hours = new Date().getHours();
					let minutes = new Date().getMinutes();
					let seconds = new Date().getSeconds();
					let h = than.mul(than.mul(hours, 60), 60)
					let m = than.mul(minutes, 60)
					var date = than.add(than.add(h, m), seconds);
					for (let i in data.list) {
						if (data.list[i].open_start < date && data.list[i].open_end > date) {
							data.list[i].state = 0
						} else if (data.list[i].open_end < date) {
							data.list[i].state = 2
						} else {
							if (data.list[i].manor_appointment_status == 1) {
								data.list[i].state = 3
							} else {
								data.list[i].state = 1
							}
						}
						var start = than.formatSeconds(data.list[i].open_start)
						var end = than.formatSeconds(data.list[i].open_end)
						data.list[i].date = start + '-' + end
					}
					than.dataList = data.list;
					than.data = data;
				})
			},
			showPopup(index, state) {
				//invite_count: 邀请
				//score: 积分
				//team_count: 团队
				this.$u.debounce(this.getResult(index, state));
			},
			getResult(index, state) {
				than.state = state;
				than.index = index;
				than.toPage('/pages/htmlB/farm/index?maid=' + than.dataList[index].maid + '&title=' + than.dataList[index].title)
			},
			formatSeconds(value) {
				var theTime = parseInt(value); // 秒
				var middle = 0; // 分
				var hour = 0; // 小时

				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (middle > 60) {
						hour = parseInt(middle / 60);
						middle = parseInt(middle % 60);
					}
				}
				if (parseInt(middle) == 0) {
					middle = "00"
				} else if (parseInt(middle) < 10) {
					middle = "0" + middle
				}
				var result = hour + ':' + middle;
				return result;
			}
		}
	}
</script>

<style lang="less">
	.share {
		image {
			width: 100%;
		}
	}

	.popup {
		width: 535rpx;
		background: #FFFFFF;

		.title {
			padding-top: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.code {
			text-align: center;
			padding-bottom: 40rpx;

			image {
				width: 81rpx;
				height: 81rpx;
			}
		}

		.cont {
			margin-top: 20rpx;
			height: 150rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;

			.name {
				margin: 0 90rpx;
			}

			.text {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #F46813;
				font-size: 28rpx;

				text {
					margin: 0 10rpx;
					font-size: 32rpx;
				}
			}
		}

		.button {
			border-radius: 40rpx;
			border: 0;
			margin-bottom: 40rpx;
			width: 314rpx;
			height: 80rpx;
			background: #333333;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
		}
	}

	page {
		background: #F4F4F7;
	}

	.content {
		.list {
			width: 678rpx;
			height: 398rpx;
			margin: 0 auto 18rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			position: relative;

			.img {
				width: 100%;
				height: 172rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			.head {
				position: absolute;
				left: 24rpx;
				top: 22rpx;
				width: 178rpx;
				border-radius: 50%;
				height: 178rpx;
			}

			.int {
				z-index: 100;
			}

			.icon {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				text-align: center;
				line-height: 42rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				width: 110rpx;
				height: 42rpx;
				background: linear-gradient(90deg, #FFC31E, #FF860B);
				border-radius: 0px 20rpx 0px 20rpx;
			}

			.data {
				width: 100%;
				height: 226rpx;
				padding: 43rpx 0 43rpx 43rpx;
				display: flex;
				align-items: center;

				.s0 {
					background: linear-gradient(90deg, #03E380, #27EE96);
				}

				.s1 {
					background: #333333;
				}

				.s2 {
					background: #E0E0E0;
				}

				.button {
					margin-left: auto;
					width: 164rpx;
					height: 80rpx;
					border-radius: 40rpx 0px 0px 40rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;

					.go {
						margin-left: 16rpx;
						width: 33rpx;
						height: 33rpx;
					}
				}



				.cont {
					padding-top: 20rpx;

					.date {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						image {
							width: 43rpx;
							height: 43rpx;
							margin-right: 15rpx;
						}

						.image {
							height: 54rpx;
						}

						.time {
							font-size: 26rpx;
							font-family: PingFang SC;
							color: #999999;
						}
					}

					.name {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.number {
						font-size: 48rpx;
						color: #FFC31E;
						font-weight: bold;

						text {
							margin-left: 10rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 200;
							font-style: normal;
							color: #999999;
						}
					}

				}

			}
		}
	}

	.advertising {

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		padding: 29rpx 40rpx 39rpx;

	}

	.dataX {
		position: relative;
		z-index: 10;
		/* #ifdef APP-PLUS */
		margin-top: calc(-100rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		margin-top: -90rpx;
		/* #endif */
		width: 678rpx;
		height: 542rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 20rpx 0;

		.user {
			padding-left: 25rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.head {
				width: 125rpx;
				height: 125rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url(../../static/image/a3.png);
				background-size: 100% 100%;

				image {
					width: 102rpx;
					height: 102rpx;
					border-radius: 50%;
				}
			}

			.experience {
				width: 500rpx;
				margin-left: 10rpx;

				.name {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;

					.right {
						margin-left: auto;
					}
				}

				.progress {
					margin-left: 40rpx;
					width: 430rpx;
					height: 60rpx;
					position: relative;
					display: flex;

					.number {
						position: absolute;
						display: flex;
						top: -10rpx;
						width: 100%;

						.view {
							width: 160rpx;
							display: flex;
							align-items: center;

							.left {
								.p-icon {
									width: 22rpx;
									height: 22rpx;
									background: #FFC250;
									border-radius: 50%;
								}
							}

							.right {
								margin-left: auto;

								.x {
									display: flex;
									align-items: center;

									.p-icon {
										margin-left: auto;
										width: 35rpx;
										height: 35rpx;
										text-align: right;
										background: rgba(253, 103, 13, 0.3);
										border-radius: 50%;
										display: flex;
										align-items: center;
										justify-content: center;

										.p {
											width: 22rpx;
											height: 22rpx;
											background: #FD670D;
											border-radius: 50%;
										}
									}
								}

							}


							.u-text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #666666;
							}
						}
					}
				}
			}
		}

		.dex {
			display: flex;
			align-items: center;

			.right {
				margin-right: 25rpx;
				margin-left: auto;
				background-image: url(../../static/image/a4.png);
				background-size: 100% 100%;
				width: 326rpx;
				height: 326rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.con {
					text-align: center;

					.name {

						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FD670D;
					}

					.number {
						font-weight: bold;
						font-size: 60rpx;
						color: #1B1B1D;
					}

					.text {
						font-weight: bold;
						font-size: 32rpx;
						color: #1B1B1D;
					}
				}
			}

			.left {
				padding-left: 30rpx;

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #C2C2C4;
				}

				.number {
					font-size: 48rpx;
					font-weight: bold;
					color: #1B1B1D;

					text {
						font-size: 32rpx;
						color: #1B1B1D;
					}
				}
			}
		}
	}

	.top {
		position: absolute;
		top: 0;
		width: 100%;
		background: #FFC31E;
		border-radius: 0rpx 0rpx 0rpx 40rpx;
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(389rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		height: 389rpx;
		/* #endif */

		color: #FFFFFF;


	}
</style>